
import React from 'react'
import ReactDOM from 'react-dom'
import * as WorkAction  from '../../actions/WorkAction';
import { connect }  from 'react-redux';

import WorkTools from './WorkTools'
import WorkList from './WorkList'
import WorkDetail from './WorkDetail'
import WorkOrderLine from './WorkOrderLine'
import WorkStatus from './WorkStatus'
import Paging from '../Paging'
import WorkRemark from './WorkRemark'
import WorkCreate from './WorkCreate'

class WorkBody extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeData: {},
      search: "",
      all: false
    }
  }

  componentDidMount() {
    var self = this;
    this.$workDetail = $(ReactDOM.findDOMNode(this.refs.WorkDetail))
    this.$workOrderLine = $(ReactDOM.findDOMNode(this.refs.WorkOrderLine))
    this.$workStatus = $(ReactDOM.findDOMNode(this.refs.WorkStatus))
    this.$workRemark = $(ReactDOM.findDOMNode(this.refs.WorkRemark))
    this.$workCreate = $(ReactDOM.findDOMNode(this.refs.WorkCreate))
    this.props.dispatch(
      WorkAction.loadWorkOrdersAsync({
        limit: 20,
        all: this.state.all
      })
    )
    // console.log(this.props.sysUser)
  }

  componentDidUpdate() {
    // console.log(this.props.workOrder)
  }

  onCreateClick() {
    this.$workCreate.modal("show")
  }

  onCreateSubmit(data) {
    this.props.dispatch(
      WorkAction.createWorkOrderAsync(data)
    )
    this.$workCreate.modal("hide")
  }

  onDataSearch(name) {
    var data = {
      unit_desc: name,
      offset: 0,
      limit: this.props.limit,
      all: this.state.all
    }
    this.props.dispatch(
      WorkAction.loadWorkOrdersAsync(data)
    )
    this.setState({
      search: name
    })
  }

  onAllCheckChanged(all) {
    this.setState({
      all: all
    })

    this.props.dispatch(
      WorkAction.loadWorkOrdersAsync({
        offset: 0,
        unit_desc: this.state.search,
        limit: this.props.limit,
        all: all
      })
    )
  }

  onDetailClick(data) {
    this.setState({
      activeData: data
    })
    this.$workDetail.modal("show")
  }

  onWorkOrderLineClick(data) {
    this.setState({
      activeData: data
    })
    this.$workOrderLine.modal("show")
  }

  onWorkOrderStatusClick(data) {
    this.setState({
      activeData: data
    })
    this.$workStatus.modal("show")
  }

  onSubmitWorker(data) {
    data.unit_desc = this.state.search
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    // console.log(data)
    this.props.dispatch(
      WorkAction.generateAsync(data)
    )
    this.$workStatus.modal("hide")
  }

  onPayOfflineClick() {
    this.$workRemark.modal("show")
  }

  onPayOffline(data) {
    data.sys_user_id = this.props.sysUser.id
    data.unit_desc = this.state.search
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      WorkAction.payOfflineWorkOrderAsync(data)
    )
    this.$workStatus.modal("hide")
    this.$workRemark.modal("hide")
  }

  onSubmitComplete(data) {
    data.unit_desc = this.state.search
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      WorkAction.updateCompleteAsync(data)
    )
    this.$workStatus.modal("hide")
  }

  onWorkOrderDeleteClick(data) {
    data.unit_desc = this.state.search
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      WorkAction.cancelWorkOrderAsync(data)
    )
  }

  onWorkOrderSyncClick(data) {
    data.unit_desc = this.state.search
    data.offset = this.props.offset
    data.limit = this.props.limit
    data.all = this.state.all
    this.props.dispatch(
      WorkAction.pushJdeAsync(data)
    )
    this.$workStatus.modal("hide")
  }

  onPageChange(page) {
    var self = this;
    this.props.dispatch(
      WorkAction.loadWorkOrdersAsync({
        offset: (page-1)*this.props.limit,
        unit_desc: self.state.search,
        limit: this.props.limit,
        all: self.state.all
      })
    )
  }

  render() {
    var self = this;

    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)

    var current = Math.ceil(offset/limit) + 1;

    return (
      <div className="content-body work-content-body" >
        <WorkTools
          onDataSearch = {this.onDataSearch.bind(self)}
          onCreateClick = {this.onCreateClick.bind(self)}
          onAllCheckChanged = {this.onAllCheckChanged.bind(self)}
          />
        <WorkList
          onDetailClick = {this.onDetailClick.bind(self)}
          onWorkOrderLineClick = {this.onWorkOrderLineClick.bind(self)}
          onWorkOrderStatusClick = {this.onWorkOrderStatusClick.bind(self)}
          onWorkOrderDeleteClick = {this.onWorkOrderDeleteClick.bind(self)}
          data = {this.props.data}/>
        <WorkCreate
          ref = "WorkCreate"
          onCreateSubmit = {this.onCreateSubmit.bind(self)}
          sysUser = {this.props.sysUser}
        />
        <WorkDetail
          ref = "WorkDetail"
          data = {this.state.activeData}
          config = {this.props.config}
        />
        <WorkOrderLine
          ref = "WorkOrderLine"
          data = {this.state.activeData}
          config = {this.props.config}
          unit_desc = {this.state.search}
          offset = {this.props.offset}
          limit = {this.props.limit}
        />
        <WorkStatus
          ref = "WorkStatus"
          data = {this.state.activeData}
          config = {this.props.config}
          sysUser = {this.props.sysUser}
          onSubmitWorker = {this.onSubmitWorker.bind(self)}
          onSubmitComplete = {this.onSubmitComplete.bind(self)}
          onPayOfflineClick = {this.onPayOfflineClick.bind(self)}
          onWorkOrderSyncClick = {this.onWorkOrderSyncClick.bind(self)}
        />
        <WorkRemark
          data = {this.state.activeData}
          ref = "WorkRemark"
          onPayOffline = {this.onPayOffline.bind(self)}
        />
        <Paging
          current = {current}
          count = {count}
          limit = {limit}
          onPageChange = {this.onPageChange.bind(self)}
        />

      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
          workOrder: state.workOrder,
          data: state.workOrder.data,
          count: parseInt(state.workOrder.count),
          offset: parseInt(state.workOrder.offset),
          limit: parseInt(state.workOrder.limit)
         }
}

export default connect(mapStateToProps)(WorkBody);
